<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>07 自定义指令</title>
</head>
<body>
  <!-- <input type="text" autofocus>
  <input type="text" autofocus> -->
  <div id="app">
    <input type="text" v-focus>
    <input type="text" v-focus>

    <!-- 
      v-model="msg"
      v-pre  v-once
     -->
    <div v-red>您好</div>
    <div v-color="'green'">您好</div>

    <input type="text" v-model="tel" max="11" placeholder="手机号" v-phone>

    <input type="number" min="1" max="100" step="10">
    <input type="color" >
    <input type="range">
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  // 全局自定义指令
  Vue.directive('focus', {
    inserted (el) { // el就是当前调用指令的DOM元素
      el.focus()
    }
  })

  Vue.directive('phone', {
    update (el) {
      console.log(el.value)
      if (/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(el.value)) {
        el.style.color = 'green'
      } else {
        el.style.color = 'red'
      }
    }
  })
  new Vue({
    data: {
      tel: ''
    },
    // 局部自定义指令
    directives: {
      'red': {
        inserted (el) { // el就是当前调用指令的DOM元素
          el.style.color = 'red'
        }
      },
      'color': {
        bind (el, binding) { // el就是当前调用指令的DOM元素
          console.log(binding)
          el.style.color = binding.value
        }
      }
    }
  }).$mount('#app')
</script>
</html>